<template>
  <div class="container">
    <div class="box">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm demo-form"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="ruleForm.username"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="btn-log"
            @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
          <el-button class="btn-log" @click="resetForm(ruleFormRef)"
            >重填</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import api from "../../axios";
import { useRouter } from "vue-router";

//引入路由
const router = useRouter();
const ruleFormRef = ref();
//登录表单数据
const ruleForm = reactive({
  username: "",
  password: "",
});

//登录表单提交校验
const validateName = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("tmd,没填啊！"));
  }
  callback();
};
const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("tmd,没填啊！"));
  }
  callback();
};

//校验规则
const rules = reactive({
  username: [{ validator: validateName, trigger: "blur" }],
  password: [{ validator: validatePass, trigger: "blur" }],
});

//表单提交功能：post提交，成功后保存数据，失败后提示错误
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    let config = { headers: {"Content-Type":"application/x-www-form-urlencoded"}};
    if (valid) {
      try {
        await api.post("/user/login",{
          username: ruleForm.username.trim(),
          password: ruleForm.password.trim(),
        },config
      );
      ElMessage({
          message: "登录成功！",
          type: "success",
        });
        localStorage.setItem("token", data.token);
        sessionStorage.setItem("nickname", data.nickname);
        router.push("/");
      } catch (error) {
        ElMessage({
        message: "信息错误！",
        type: "error",
      });
      return false;
      }
    }
  });
};

//重置表单
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

//游客登录功能
const submitFormOfNOtLogin = async () => {
  try {
    const data = await api("/nologin");
    ElMessage({
      message: "登录成功！",
      type: "success",
    });
    localStorage.setItem("token", data.token);
    sessionStorage.setItem("nickname", "游客");
    router.push("/");
  } catch (error) {}
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100vh);
  background-image: url(@/assets/img/login-bj.jpg);
  background-size: 100%;
  display: flex;
  .box {
    width: 30%;
    min-width: 300px;
    margin: auto;
    max-width:500px;
    border: 1px solid black;
    border-radius: 15px;
    padding: 20px 20px 0 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    opacity: 0.9;
    .btn-log {
      width: 40%;
      min-width: 30px;
    }
    .demo-form ::v-deep .el-form-item__label {
      color: #ff9800 !important;
      font-size: 18px;
      font-weight: 600;
    }
  }
}
</style>